<template>
  <div>
    <Row>
      <Col span="6">
        <div class="left_tree" style="min-height: 607px">
          <div class="header">企业-场地列表</div>
          <Tree :data="treeData" :render="renderContent" class="demo-tree-render"></Tree>
        </div>
      </Col>
      <Col span="18" style="padding: 0px 10px">
        <Row class="list_row" style="margin-top: 0px">
<!--          <div class="right_header">[{{selSpaceName}}]下的团队列表：</div>-->
          <Alert>【{{selSpaceName}}】下的团队列表：</Alert>

          <Row style="margin: 5px 0px 10px 0px;">
            <Input placeholder="输入团队名称进行查询" style="width: 200px;margin-right: 20px"/>
            <Button type="primary" icon="ios-search" style="margin-right: 20px">查询</Button>
            <Button type="primary" icon="md-add" @click="showAddTeam">新增团队</Button>
          </Row>
          <Table :columns="teamColumn" border :data="teamList" stripe>
            <template slot-scope="{ row, index }" slot="seq">
              {{(currentPage - 1) * pageSize + index + 1}}
            </template>
          </Table>
          <div class="div_page">
            <Page :total="totalCount" :current="currentPage" :page-size="pageSize"
                  show-total show-elevator prev-text="<" next-text=">" @on-change="pageChg"/>
          </div>
        </Row>
      </Col>
    </Row>

    <!-- 新增场地弹窗 -->
    <Modal v-model="showSpaceModel" width="600" title="新增场地">
      <Form ref="entityForm" :model="spaceModel" :rules="spaceFormRules" :label-width="120">
        <FormItem label="场地名称" prop="name">
          <Input v-model="spaceModel.name" placeholder="请输入场地名称"></Input>
        </FormItem>
      </Form>
      <div slot="footer" style="text-align: center">
        <Button type="primary" @click="saveSpace" :loading="saveSpaceLoading">
          <span v-if="!saveSpaceLoading">保存</span>
          <span v-else>保存....</span>
        </Button>
      </div>
    </Modal>

    <!-- 新增团队弹窗 -->
    <Modal v-model="showTeamModel" width="500" title="新增团队">
      <Form ref="loginForm" :model="teamForm" :rules="teamFormRules" :label-width="90">
        <FormItem label="团队名称" prop="name">
          <Input v-model="teamForm.name" placeholder="请输入场地名称" style="width: 95%"></Input>
        </FormItem>
        <FormItem label="请选择教练" prop="coach">
          <AutoComplete
            v-model="teamForm.coach"
            :data="coachSeachResultList"
            @on-search="searchCoach"
            placeholder="输入教练名字进行查询..."
            style="width:95%"></AutoComplete>
        </FormItem>
        <Divider orientation="left">设置团队学员</Divider>
        <Transfer style="margin: auto"
                  :data="studentList"
                  :titles="['学员列表','已选学员']"
                  :target-keys="selStudentList"
                  :render-format="transferRender"
                  @on-change="transferOnChange"></Transfer>
      </Form>
      <div slot="footer" style="text-align: center">
        <Button @click="showTeamModel=false">取消
        </Button>
        <Button type="primary" @click="saveSpace" :loading="saveSpaceLoading">
          <span v-if="!saveSpaceLoading">保存</span>
          <span v-else>保存....</span>
        </Button>
      </div>
    </Modal>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        showTeamModel: false,
        studentList: [
          {key: '1', 'name': '陈大壮1'},
          {key: '2', 'name': '陈大壮2'},
          {key: '3', 'name': '陈大壮3'},
          {key: '4', 'name': '陈大壮4'},
          {key: '5', 'name': '陈大壮5'},
          {key: '6', 'name': '陈大壮6'},
          {key: '7', 'name': '陈大壮7'},
        ],
        selStudentList: ["1", "2", "3"],
        coachSeachResultList: [],
        coachList: [
          {id: '1', 'name': '陈小小'},
          {id: '1', 'name': '王二小1'},
          {id: '1', 'name': '王二小2'},
          {id: '1', 'name': '王二小3'},
          {id: '1', 'name': '王二小4'},
          {id: '2', 'name': '刘若动'},
          {id: '3', 'name': '张小本'},
          {id: '4', 'name': '张捷克'},
          {id: '5', 'name': '马花藤'}
        ],
        teamForm: {
          name: '',
          coach: ''
        },
        teamFormRules: {},
        spaceFormRules: {},
        showSpaceModel: false,
        spaceModel: {
          name: ''
        },
        saveSpaceLoading: false,
        selSpaceName: '泉州XXX健身俱乐部1',
        selCompanyId: '',
        selSpaceId: '',
        treeData: [
          {
            id: '1',
            title: '泉州XXX健身俱乐部1',
            type: 'company',
            expand: true,
            children: [
              {
                id: '2',
                type: 'team',
                title: '浦西万达广场1楼',
                expand: true
              },
              {
                id: '3',
                type: 'team',
                title: '浦西万达广场2楼',
                expand: true
              },
              {
                id: '4',
                type: 'team',
                title: '浦西万达广场3楼',
                expand: true
              },
              {
                id: '5',
                type: 'team',
                title: '浦西万达广场4楼',
                expand: true
              }
            ]
          },
          {
            id: '66',
            title: '晋江市帝X斯健身房',
            type: 'company',
            expand: true,
            children: [
              {
                id: '6',
                type: 'team',
                title: '晋江市世纪大道万达广场F4',
                expand: true
              },
              {
                id: '7',
                type: 'team',
                title: '晋江市世纪大道万达广场F6',
                expand: true
              }
            ]
          },
          {
            id: '11',
            title: '晋江市帝X斯健身房2',
            type: 'company',
            expand: true,
            children: [
              {
                id: '12',
                type: 'team',
                title: '晋江市世纪大道万达广场F3',
                expand: true
              },
              {
                id: '13',
                type: 'team',
                title: '晋江市世纪大道万达广场F1',
                expand: true
              }
            ]
          }, {
            id: '333',
            title: '泉州XXX健身俱乐部2',
            type: 'company',
            expand: true,
            children: [
              {
                id: '33',
                type: 'team',
                title: '浦西万达广场11楼',
                expand: true
              },
              {
                id: '34',
                type: 'team',
                title: '浦西万达广场12楼',
                expand: true
              },
              {
                id: '35',
                type: 'team',
                title: '浦西万达广场13楼',
                expand: true
              },
              {
                id: '36',
                type: 'team',
                title: '浦西万达广场14楼',
                expand: true
              }
            ]
          }
        ],
        buttonProps: {
          type: 'default',
          size: 'small',
        },
        totalCount: 20,
        currentPage: 1,
        pageSize: 10,
        teamList: [],
        teamColumn: [
          {
            title: '序号',
            slot: 'seq',
            width: 65
          },
          {
            title: '团队名称',
            key: 'name'
          },
          {
            title: '教练',
            key: 'coach',
            width: 80
          },
          {
            title: '学员数',
            key: 'studentCount',
            width: 80
          },
          {
            title: '创建人',
            key: 'creater',
            width: 80
          },
          {
            title: '创建时间',
            key: 'createTime',
            width: 110
          },
          {
            title: '操作',
            key: 'action',
            width: 180,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    marginRight: '15px'
                  },
                  on: {
                    click: () => {
                      this.detail(params.row.id);
                    }
                  }
                }, '查看'),
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  style: {
                    marginRight: '15px'
                  },
                  on: {
                    click: () => {
                      this.showEditDialog(params.row);
                    }
                  }
                }, '修改'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.del(params.row);
                    }
                  }
                }, '删除')
              ]);
            }
          }]

      }
    },
    methods: {
      transferOnChange(newTargetKeys, direction, moveKeys) {
        // console.log(newTargetKeys);
        // console.log(direction);
        // console.log(moveKeys);
        this.selStudentList = newTargetKeys;
      },
      transferRender(item) {
        return item.name;
      },
      searchCoach(value) {
        if (value == '') {
          this.coachSeachResultList = this.coachList
        }
        var ret = ['马花疼', '马运']
        for (var i = 0; i < this.coachList.length; i++) {
          var coach = this.coachList[i];
          if (coach.name.indexOf(value) > -1) {
            ret.push(coach.name)
          }
        }
        this.coachSeachResultList = ret
      },
      saveSpace() {
        this.showTeamModel = false
        this.$Message.success('保存场地成功！');
      },
      renderContent(h, {root, node, data}) {
        if (data.type == 'company') {
          return h('span', {
            class: 'company'
          }, [
            h('span', [
              h('Icon', {
                props: {
                  // type: 'ios-people'
                  custom: "iconfont icon-company"
                },
                class: 'company_title_icon'
              }),
              h('span', {
                class: 'company_title',
                attrs: {
                  id: "company_" + data.id
                },
                on: {
                  click: () => {
                    this.selCompany(data)
                  }
                }
              }, data.title)
            ]),
            h('span', {
              class: 'company_title_btn'
            }, [
              h('Icon', {
                props: {
                  type: 'ios-add-circle'
                },
                class: 'company_title_icon',
                on: {
                  click: () => {
                    this.showAddSpace(data)
                  }
                }
              })
            ])
          ]);
        }
        return h('span', {
          style: {
            display: 'inline-block',
            width: '100%'
          }
        }, [
          h('span', [
            h('Icon', {
              props: {
                custom: "iconfont icon-space"
              },
              style: {
                marginRight: '4px'
              }
            }),
            h('span', {
              class: 'space_title',
              attrs: {
                id: "space_" + data.id
              },
              on: {
                click: () => {
                  this.selSpace(data)
                }
              }
            }, data.title),
            h('Icon', {
              props: {
                type: 'ios-add-circle',
                size: 15
              },
              attrs: {
                id: "space_ico_" + data.id
              },
              class: 'space_add_ico',
              on: {
                click: () => {
                  this.showAddTeam(data)
                }
              }
            })
          ])
        ]);
      },
      append(data) {
        const children = data.children || [];
        children.push({
          title: 'appended node',
          expand: true
        });
        this.$set(data, 'children', children);
      },
      remove(root, node, data) {
        const parentKey = root.find(el => el === node).parent;
        const parent = root.find(el => el.nodeKey === parentKey).node;
        const index = parent.children.indexOf(data);
        parent.children.splice(index, 1);
      },
      selCompany(company) {
        this.removeAllSelected()
        const span = document.getElementById("company_" + company.id)
        span.className = "company_title selected"
        this.selSpaceName = "企业：" + company.title
      },
      selSpace(team) {
        this.removeAllSelected()
        const span = document.getElementById("space_" + team.id)
        span.className = "space_title selected"
        this.selSpaceName = team.title
        //显示添加链接
        document.getElementById("space_ico_" + team.id).className = "ivu-icon ivu-icon-ios-add-circle space_add_ico checked"
      },
      removeAllSelected() {
        const allTeamArr = document.getElementsByClassName("space_title")
        for (var i = 0; i < allTeamArr.length; i++) {
          var ele = allTeamArr[i];
          ele.className = "space_title"
        }
        const allCompanyArr = document.getElementsByClassName("company_title")
        for (var i = 0; i < allCompanyArr.length; i++) {
          var ele = allCompanyArr[i];
          ele.className = "company_title"
        }

        const spaceAddArr = document.getElementsByClassName("space_add_ico")
        for (var i = 0; i < spaceAddArr.length; i++) {
          var ele = spaceAddArr[i];
          ele.className = "ivu-icon ivu-icon-ios-add-circle space_add_ico"
        }

      },
      showAddSpace(company) {
        this.showSpaceModel = {name: ''}
        this.showSpaceModel = true
      },
      showAddTeam(team) {
        this.showTeamModel = true
      },
      pageChg(selPage) {
        this.currentPage = selPage
        this.fetchDataList()
      },
      fetchDataList() {
        //mock data
        var dataArr = []
        const startIndex = (this.currentPage - 1) * this.pageSize + 1
        for (var i = 0; i < this.pageSize; i++) {
          var obj = {
            id: (i + startIndex),
            name: '2020年第' + (i + startIndex) + "期增肌训练营",
            studentCount: 10 + i + startIndex,
            coach: "马花藤",
            creater: "张果伟",
            createTime: "2020-04-20",
          }
          dataArr.push(obj)
        }
        this.teamList = dataArr
      },
      showEditDialog(row) {
        this.showTeamModel = true
      },
      del(row) {
        this.$Modal.confirm({
          title: "删除提示",
          content: "确定删除该团队吗？",
          okText: "删除",
          cancelText: "取消",
          onOk: () => {
            this.doDel(row.id);
          }
        });
      },
      doDel(id) {
        this.$Message.success('删除成功！');
      },
      detail(id) {
        this.showTeamModel = true
      }
    },
    created() {
      this.currentPage = 1
      this.fetchDataList()
    }
  }
</script>
<style>
  .demo-tree-render .ivu-tree-title {
    width: 100%;
  }

  .ivu-tree-arrow i {
    font-size: 20px;
  }

  .space_title:hover {
    /*color: #2d8cf0;*/
    text-decoration: underline;
    cursor: pointer;
  }

  .space_title.selected {
    color: #5cadff;
    text-decoration: underline;
    /*font-weight: bolder;*/
  }

  .company {
    display: inline-block;
    width: 100%;
    font-size: 14px;
    margin-left: 10px;
  }

  .company_title_icon {
    color: #5cadff;
    cursor: pointer;
    margin-top: -3px;
  }

  .company_title_icon:hover {
    opacity: 0.5;
  }

  .company_title {
    color: #5cadff;
    cursor: pointer;
    display: inline-block;
    margin-right: 5px;
  }

  .company_title:hover {
    text-decoration: underline;
  }

  .company_title.selected {
    color: #5cadff;
    text-decoration: underline;
    font-weight: bolder;
  }

  .company_title_btn {
    margin-left: 2px;
  }

  .company_title_btn button {
    margin-top: -4px;

  }

  .ivu-tree-arrow i {
    font-size: 20px;
    color: #5cadff;
    margin-top: -5px;
  }

  .ivu-btn-circle.ivu-btn-icon-only.ivu-btn-small, .ivu-btn-circle-outline.ivu-btn-icon-only.ivu-btn-small {
    width: 20px;
    height: 20px;
    border-radius: 10px;
  }

  .space_add_ico {
    cursor: pointer;
    margin-left: 5px;
    display: none;
  }

  .space_add_ico.checked {
    display: inline-block;
    color: #5cadff;
  }
</style>
